﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>盒子水平垂直居中</title>

    <style>
        .father{
            border: 1px solid red; width: 400px; height: 400px;
            /*
             * 把父盒子设置成伸缩盒布局
             * 特征:子元素默认水平排列
             */
            display:flex;

            /**
             * 主轴   可以理解成对齐方式   默认是  flex-start   取值有  flex-start flex-end center space-around space-between
             * 需要注意的是不写flex-direction为column的时候，主轴是水平排列
             * 写了column的时候，那主轴是纵向排列
             */
            justify-content:center;

            /**
             * 表示子项在交叉轴上的对方方式  flex-start flex-end center stretch baseline
             * flex-start交叉轴的起点对齐   以咱们数学里的x轴和y轴来看，可以理解成是左上角为起点对齐
             * flex-end 交叉轴的终点对齐    以咱们数学里的x轴和y轴来看，可以理解成是左下角为起点对齐
             * center 交叉轴的中心点对齐
             * stretch这是默认值，如果子项没有设置高度或者auto，将占满整个容器的高度
             * baseline子项第一行文字的基准线对齐。
             */
            align-items:center;

        }
        .child{
            border: 1px solid blue;
            height: 100px; width: 100px;
        }
    </style>
</head>
<body>
    <h1>flex伸缩盒模式和flex方向</h1>
    <div class="father">
        <div class="child">child1</div>
    </div>
</body>
</html>